<template>
  <t-dialog :closeBtn="false" :footer="false" :header="false" v-model:visible="visLogin">
    <template #body>
      <t-form ref="form" :data="formData" :rules="rules" label-width="0" @submit="onSubmit">
        <t-form-item name="account">
          <t-input v-model="formData.account" size="large" placeholder="请输入账号：admin">
            <template #prefix-icon>
              <t-icon name="user" />
            </template>
          </t-input>
        </t-form-item>

        <t-form-item name="password">
          <t-input
            v-model="formData.password"
            size="large"
            :type="showPsw ? 'text' : 'password'"
            clearable
            placeholder="请输入登录密码：admin"
          >
            <template #prefix-icon>
              <t-icon name="lock-on" />
            </template>
            <template #suffix-icon>
              <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
            </template>
          </t-input>
        </t-form-item>
        <t-form-item class="btn-container">
          <t-button block size="large" type="submit"> 登录 </t-button>
        </t-form-item>
        <div class="check-container remember-pwd">
          <t-checkbox>记住账号</t-checkbox>
          <span class="tip" @click="$emit('someEvent', true)">没有账号？立即注册！</span>
        </div>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
const visLogin = defineModel()

const formData = reactive({
  account: '',
  password: ''
})
var showPsw = false
const rules = {
  account: [{ required: true }, { min: 3 }, { max: 10, type: 'warning' }],
  password: [
    { required: true, message: '密码必填', type: 'error' }
    //{ len: 8, message: '请输入 8 位密码' }
  ]
}
//import { useWsuserStore } from '@/stores/wsuser'
//const wsstore = useWsuserStore()
import { useUserStore } from '@/stores/users'
const user = useUserStore()

const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    var params = { username: formData.account, password: formData.password }
    user.login(params).then((res) => {
      if(res)
      MessagePlugin.success('res.info.msg')
      visLogin.value = false
    })
  } else {
    console.log('Validate Errors: ', firstError, validateResult)
    MessagePlugin.warning(firstError)
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
